<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vsv车队成员管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }
            .hover-lift {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15);
            }
            .btn-effect {
                transition: all 0.2s ease;
            }
            .btn-effect:active {
                transform: scale(0.96);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen text-dark">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-car text-2xl"></i>
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">Vsv车队</h1>
            </div>
            <div class="hidden md:flex items-center space-x-6">
                <span class="flex items-center"><i class="fa fa-users mr-2"></i> <span id="member-count">0</span> 名成员</span>
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-primary-700 transition-colors">
                    <i class="fa fa-moon-o"></i>
                </button>
            </div>
            <button class="md:hidden text-xl" id="mobile-menu-btn">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-primary-800">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <span class="flex items-center"><i class="fa fa-users mr-2"></i> <span id="mobile-member-count">0</span> 名成员</span>
                <button id="mobile-theme-toggle" class="p-2 rounded-full hover:bg-primary-700 transition-colors text-left">
                    <i class="fa fa-moon-o mr-2"></i>切换主题
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 功能卡片区域 -->
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
            <!-- 添加成员卡片 -->
            <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                <div class="flex items-center mb-4">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-user-plus text-xl"></i>
                    </div>
                    <h2 class="ml-4 text-xl font-bold">添加成员</h2>
                </div>
                <form id="add-member-form" class="space-y-4">
                    <div>
                        <label for="member-name" class="block text-sm font-medium text-gray-700 mb-1">成员姓名</label>
                        <input type="text" id="member-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="请输入成员姓名" required>
                    </div>
                    <button type="submit" class="w-full bg-primary text-white py-2.5 px-4 rounded-lg hover:bg-primary/90 btn-effect flex items-center justify-center">
                        <i class="fa fa-plus mr-2"></i>添加成员
                    </button>
                </form>
            </div>

            <!-- 分配权限卡片 -->
            <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                <div class="flex items-center mb-4">
                    <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                        <i class="fa fa-key text-xl"></i>
                    </div>
                    <h2 class="ml-4 text-xl font-bold">分配权限</h2>
                </div>
                <form id="assign-role-form" class="space-y-4">
                    <div>
                        <label for="member-select" class="block text-sm font-medium text-gray-700 mb-1">选择成员</label>
                        <select id="member-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-secondary transition-all" required>
                            <option value="">请选择成员</option>
                        </select>
                    </div>
                    <div>
                        <label for="role-select" class="block text-sm font-medium text-gray-700 mb-1">选择身份</label>
                        <select id="role-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-secondary transition-all" required>
                            <option value="">请选择身份</option>
                            <option value="首席">首席</option>
                            <option value="副首席">副首席</option>
                            <option value="剧情编辑组长">剧情编辑组长</option>
                            <option value="副编辑剧情组长">副编辑剧情组长</option>
                            <option value="工程师">工程师</option>
                            <option value="普通成员">普通成员</option>
                        </select>
                    </div>
                    <button type="submit" class="w-full bg-secondary text-white py-2.5 px-4 rounded-lg hover:bg-secondary/90 btn-effect flex items-center justify-center">
                        <i class="fa fa-check mr-2"></i>分配身份
                    </button>
                </form>
            </div>

            <!-- 移除成员卡片 -->
            <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
                <div class="flex items-center mb-4">
                    <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                        <i class="fa fa-user-times text-xl"></i>
                    </div>
                    <h2 class="ml-4 text-xl font-bold">移除成员</h2>
                </div>
                <form id="remove-member-form" class="space-y-4">
                    <div>
                        <label for="remove-member-select" class="block text-sm font-medium text-gray-700 mb-1">选择成员</label>
                        <select id="remove-member-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-danger focus:border-danger transition-all" required>
                            <option value="">请选择要移除的成员</option>
                        </select>
                    </div>
                    <button type="submit" class="w-full bg-danger text-white py-2.5 px-4 rounded-lg hover:bg-danger/90 btn-effect flex items-center justify-center">
                        <i class="fa fa-trash mr-2"></i>移除成员
                    </button>
                </form>
            </div>
        </section>

        <!-- 成员列表区域 -->
        <section class="mb-10">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold flex items-center">
                    <i class="fa fa-list-alt text-primary mr-2"></i>成员列表
                </h2>
                <div class="flex space-x-2">
                    <button id="sort-by-name" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors btn-effect flex items-center">
                        <i class="fa fa-sort-alpha-asc mr-1"></i>按姓名排序
                    </button>
                    <button id="sort-by-role" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors btn-effect flex items-center">
                        <i class="fa fa-sort-numeric-asc mr-1"></i>按身份排序
                    </button>
                </div>
            </div>
            
            <div id="members-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 成员卡片将通过JavaScript动态生成 -->
                <div class="col-span-full text-center py-12 text-gray-500">
                    <i class="fa fa-users text-5xl mb-4 opacity-30"></i>
                    <p class="text-lg">暂无成员，请添加车队成员</p>
                </div>
            </div>
        </section>
        
        <!-- 职位占用情况 -->
        <section class="mb-10">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fa fa-tasks text-primary mr-2"></i>职位占用情况
            </h2>
            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="flex items-center p-3 border rounded-lg">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-star"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <span class="font-medium">首席</span>
                                <span id="chief-count" class="text-sm px-2 py-1 rounded-full bg-gray-100">0/1</span>
                            </div>
                            <p id="chief-name" class="text-sm text-gray-500 mt-1">空缺</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center p-3 border rounded-lg">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-star-half-o"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <span class="font-medium">副首席</span>
                                <span id="vice-chief-count" class="text-sm px-2 py-1 rounded-full bg-gray-100">0/1</span>
                            </div>
                            <p id="vice-chief-name" class="text-sm text-gray-500 mt-1">空缺</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center p-3 border rounded-lg">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-pencil"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <span class="font-medium">剧情编辑组长</span>
                                <span id="editor-chief-count" class="text-sm px-2 py-1 rounded-full bg-gray-100">0/不限</span>
                            </div>
                            <p id="editor-chief-name" class="text-sm text-gray-500 mt-1">暂无</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center p-3 border rounded-lg">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-pencil-square-o"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <span class="font-medium">副编辑剧情组长</span>
                                <span id="vice-editor-count" class="text-sm px-2 py-1 rounded-full bg-gray-100">0/不限</span>
                            </div>
                            <p id="vice-editor-name" class="text-sm text-gray-500 mt-1">暂无</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center p-3 border rounded-lg">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <span class="font-medium">工程师</span>
                                <span id="engineer-count" class="text-sm px-2 py-1 rounded-full bg-gray-100">0/1</span>
                            </div>
                            <p id="engineer-name" class="text-sm text-gray-500 mt-1">空缺</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center p-3 border rounded-lg">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <span class="font-medium">普通成员</span>
                                <span id="member-count-display" class="text-sm px-2 py-1 rounded-full bg-gray-100">0/不限</span>
                            </div>
                            <p class="text-sm text-gray-500 mt-1">成员数量会在这里显示</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-car text-2xl mr-2"></i>
                    <h2 class="text-xl font-bold">Vsv车队</h2>
                </div>
                <div class="text-center md:text-right">
                    <p>© 2023 Vsv车队管理系统</p>
                    <p class="text-sm text-gray-400 mt-1">专注于车队成员高效管理</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 通知提示框 -->
    <div id="notification" class="fixed top-20 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center z-50">
        <i id="notification-icon" class="mr-2"></i>
        <span id="notification-message"></span>
    </div>

    <script>
        // 存储成员数据
        let members = [];
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 初始化事件监听器
            initEventListeners();
            
            // 从本地存储加载数据
            loadFromLocalStorage();
            
            // 更新UI
            updateUI();
        });
        
        // 初始化事件监听器
        function initEventListeners() {
            // 添加成员表单提交
            document.getElementById('add-member-form').addEventListener('submit', (e) => {
                e.preventDefault();
                addMember();
            });
            
            // 分配角色表单提交
            document.getElementById('assign-role-form').addEventListener('submit', (e) => {
                e.preventDefault();
                assignRole();
            });
            
            // 移除成员表单提交
            document.getElementById('remove-member-form').addEventListener('submit', (e) => {
                e.preventDefault();
                removeMember();
            });
            
            // 排序按钮
            document.getElementById('sort-by-name').addEventListener('click', () => {
                sortMembersByName();
            });
            
            document.getElementById('sort-by-role').addEventListener('click', () => {
                sortMembersByRole();
            });
            
            // 移动端菜单切换
            document.getElementById('mobile-menu-btn').addEventListener('click', () => {
                const mobileMenu = document.getElementById('mobile-menu');
                mobileMenu.classList.toggle('hidden');
            });
            
            // 主题切换
            document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
            document.getElementById('mobile-theme-toggle').addEventListener('click', toggleTheme);
        }
        
        // 添加成员
        function addMember() {
            const nameInput = document.getElementById('member-name');
            const name = nameInput.value.trim();
            
            if (!name) return;
            
            // 检查是否已存在同名成员
            if (members.some(member => member.name === name)) {
                showNotification('该成员已存在', 'error');
                return;
            }
            
            // 添加新成员，默认为普通成员
            members.push({
                id: Date.now().toString(),
                name: name,
                role: '普通成员'
            });
            
            // 清空输入框
            nameInput.value = '';
            
            // 保存并更新UI
            saveToLocalStorage();
            updateUI();
            
            showNotification(`成功添加成员: ${name}`, 'success');
        }
        
        // 分配角色
        function assignRole() {
            const memberSelect = document.getElementById('member-select');
            const roleSelect = document.getElementById('role-select');
            
            const memberId = memberSelect.value;
            const role = roleSelect.value;
            
            if (!memberId || !role) return;
            
            // 检查是否为唯一角色且已有人担任
            const uniqueRoles = ['首席', '副首席', '工程师'];
            if (uniqueRoles.includes(role)) {
                const existingMember = members.find(member => member.role === role && member.id !== memberId);
                if (existingMember) {
                    showNotification(`${role} 已有成员担任: ${existingMember.name}`, 'error');
                    return;
                }
            }
            
            // 查找成员并更新角色
            const member = members.find(m => m.id === memberId);
            if (member) {
                const oldRole = member.role;
                member.role = role;
                
                // 保存并更新UI
                saveToLocalStorage();
                updateUI();
                
                showNotification(`${member.name} 已从 ${oldRole} 变更为 ${role}`, 'success');
            }
        }
        
        // 移除成员
        function removeMember() {
            const removeSelect = document.getElementById('remove-member-select');
            const memberId = removeSelect.value;
            
            if (!memberId) return;
            
            // 查找成员
            const member = members.find(m => m.id === memberId);
            if (member) {
                // 从数组中移除成员
                members = members.filter(m => m.id !== memberId);
                
                // 保存并更新UI
                saveToLocalStorage();
                updateUI();
                
                showNotification(`已移除成员: ${member.name}`, 'success');
            }
        }
        
        // 按姓名排序
        function sortMembersByName() {
            members.sort((a, b) => a.name.localeCompare(b.name));
            updateMembersList();
            showNotification('已按姓名排序', 'info');
        }
        
        // 按角色排序
        function sortMembersByRole() {
            // 定义角色排序优先级
            const rolePriority = {
                '首席': 1,
                '副首席': 2,
                '剧情编辑组长': 3,
                '副编辑剧情组长': 4,
                '工程师': 5,
                '普通成员': 6
            };
            
            members.sort((a, b) => rolePriority[a.role] - rolePriority[b.role]);
            updateMembersList();
            showNotification('已按身份排序', 'info');
        }
        
        // 更新整个UI
        function updateUI() {
            updateMemberCount();
            updateMemberSelects();
            updateMembersList();
            updateRoleStatistics();
        }
        
        // 更新成员计数
        function updateMemberCount() {
            const count = members.length;
            document.getElementById('member-count').textContent = count;
            document.getElementById('mobile-member-count').textContent = count;
        }
        
        // 更新成员选择下拉框
        function updateMemberSelects() {
            const memberSelect = document.getElementById('member-select');
            const removeSelect = document.getElementById('remove-member-select');
            
            // 保存当前选中值
            const currentMemberValue = memberSelect.value;
            const currentRemoveValue = removeSelect.value;
            
            // 清空下拉框
            memberSelect.innerHTML = '<option value="">请选择成员</option>';
            removeSelect.innerHTML = '<option value="">请选择要移除的成员</option>';
            
            // 添加成员选项
            members.forEach(member => {
                const option1 = document.createElement('option');
                option1.value = member.id;
                option1.textContent = `${member.name} (${member.role})`;
                memberSelect.appendChild(option1);
                
                const option2 = document.createElement('option');
                option2.value = member.id;
                option2.textContent = `${member.name} (${member.role})`;
                removeSelect.appendChild(option2);
            });
            
            // 尝试恢复之前的选中值
            if (currentMemberValue && members.some(m => m.id === currentMemberValue)) {
                memberSelect.value = currentMemberValue;
            }
            
            if (currentRemoveValue && members.some(m => m.id === currentRemoveValue)) {
                removeSelect.value = currentRemoveValue;
            }
        }
        
        // 更新成员列表
        function updateMembersList() {
            const listContainer = document.getElementById('members-list');
            
            // 清空列表
            listContainer.innerHTML = '';
            
            if (members.length === 0) {
                listContainer.innerHTML = `
                    <div class="col-span-full text-center py-12 text-gray-500">
                        <i class="fa fa-users text-5xl mb-4 opacity-30"></i>
                        <p class="text-lg">暂无成员，请添加车队成员</p>
                    </div>
                `;
                return;
            }
            
            // 添加成员卡片
            members.forEach(member => {
                const roleClass = getRoleClass(member.role);
                const roleIcon = getRoleIcon(member.role);
                
                const card = document.createElement('div');
                card.className = 'bg-white rounded-xl p-5 card-shadow hover-lift border-l-4 transition-all';
                card.style.borderLeftColor = roleClass.color;
                
                card.innerHTML = `
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-12 h-12 rounded-full ${roleClass.bgClass} flex items-center justify-center">
                            <i class="${roleIcon} text-xl ${roleClass.colorClass}"></i>
                        </div>
                        <span class="px-3 py-1 rounded-full text-sm font-medium ${roleClass.badgeClass}">${member.role}</span>
                    </div>
                    <h3 class="text-xl font-bold mb-2">${member.name}</h3>
                    <div class="flex justify-end space-x-2 mt-4">
                        <button class="edit-role-btn px-3 py-1 border rounded-lg text-sm hover:bg-gray-50 transition-colors btn-effect" data-id="${member.id}">
                            <i class="fa fa-pencil mr-1"></i>修改身份
                        </button>
                        <button class="remove-member-btn px-3 py-1 border border-danger text-danger rounded-lg text-sm hover:bg-danger/5 transition-colors btn-effect" data-id="${member.id}">
                            <i class="fa fa-trash mr-1"></i>移除
                        </button>
                    </div>
                `;
                
                listContainer.appendChild(card);
            });
            
            // 为卡片上的按钮添加事件监听器
            document.querySelectorAll('.edit-role-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const memberId = btn.getAttribute('data-id');
                    document.getElementById('member-select').value = memberId;
                    
                    // 滚动到分配权限卡片
                    document.getElementById('assign-role-form').scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
            
            document.querySelectorAll('.remove-member-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const memberId = btn.getAttribute('data-id');
                    document.getElementById('remove-member-select').value = memberId;
                    
                    // 滚动到移除成员卡片
                    document.getElementById('remove-member-form').scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        }
        
        // 更新角色统计信息
        function updateRoleStatistics() {
            // 统计各角色数量
            const roleCounts = {
                '首席': 0,
                '副首席': 0,
                '剧情编辑组长': 0,
                '副编辑剧情组长': 0,
                '工程师': 0,
                '普通成员': 0
            };
            
            const roleMembers = {
                '首席': [],
                '副首席': [],
                '剧情编辑组长': [],
                '副编辑剧情组长': [],
                '工程师': [],
                '普通成员': []
            };
            
            members.forEach(member => {
                if (roleCounts.hasOwnProperty(member.role)) {
                    roleCounts[member.role]++;
                    roleMembers[member.role].push(member.name);
                }
            });
            
            // 更新UI
            document.getElementById('chief-count').textContent = `${roleCounts['首席']}/1`;
            document.getElementById('chief-name').textContent = roleMembers['首席'].length > 0 ? roleMembers['首席'][0] : '空缺';
            
            document.getElementById('vice-chief-count').textContent = `${roleCounts['副首席']}/1`;
            document.getElementById('vice-chief-name').textContent = roleMembers['副首席'].length > 0 ? roleMembers['副首席'][0] : '空缺';
            
            document.getElementById('editor-chief-count').textContent = `${roleCounts['剧情编辑组长']}/不限`;
            document.getElementById('editor-chief-name').textContent = roleMembers['剧情编辑组长'].length > 0 ? 
                roleMembers['剧情编辑组长'].join(', ') : '暂无';
            
            document.getElementById('vice-editor-count').textContent = `${roleCounts['副编辑剧情组长']}/不限`;
            document.getElementById('vice-editor-name').textContent = roleMembers['副编辑剧情组长'].length > 0 ? 
                roleMembers['副编辑剧情组长'].join(', ') : '暂无';
            
            document.getElementById('engineer-count').textContent = `${roleCounts['工程师']}/1`;
            document.getElementById('engineer-name').textContent = roleMembers['工程师'].length > 0 ? roleMembers['工程师'][0] : '空缺';
            
            document.getElementById('member-count-display').textContent = `${roleCounts['普通成员']}/不限`;
        }
        
        // 获取角色对应的样式类
        function getRoleClass(role) {
            switch(role) {
                case '首席':
                    return {
                        color: '#E6A23C',
                        bgClass: 'bg-yellow-100',
                        colorClass: 'text-yellow-600',
                        badgeClass: 'bg-yellow-100 text-yellow-800'
                    };
                case '副首席':
                    return {
                        color: '#909399',
                        bgClass: 'bg-gray-100',
                        colorClass: 'text-gray-600',
                        badgeClass: 'bg-gray-100 text-gray-800'
                    };
                case '剧情编辑组长':
                    return {
                        color: '#F56C6C',
                        bgClass: 'bg-red-100',
                        colorClass: 'text-red-600',
                        badgeClass: 'bg-red-100 text-red-800'
                    };
                case '副编辑剧情组长':
                    return {
                        color: '#F7BA1E',
                        bgClass: 'bg-orange-100',
                        colorClass: 'text-orange-600',
                        badgeClass: 'bg-orange-100 text-orange-800'
                    };
                case '工程师':
                    return {
                        color: '#409EFF',
                        bgClass: 'bg-blue-100',
                        colorClass: 'text-blue-600',
                        badgeClass: 'bg-blue-100 text-blue-800'
                    };
                case '普通成员':
                default:
                    return {
                        color: '#67C23A',
                        bgClass: 'bg-green-100',
                        colorClass: 'text-green-600',
                        badgeClass: 'bg-green-100 text-green-800'
                    };
            }
        }
        
        // 获取角色对应的图标
        function getRoleIcon(role) {
            switch(role) {
                case '首席':
                    return 'fa fa-trophy';
                case '副首席':
                    return 'fa fa-star-half-o';
                case '剧情编辑组长':
                    return 'fa fa-pencil-square';
                case '副编辑剧情组长':
                    return 'fa fa-pencil';
                case '工程师':
                    return 'fa fa-cogs';
                case '普通成员':
                default:
                    return 'fa fa-user';
            }
        }
        
        // 显示通知
        function showNotification(message, type = 'info') {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notification-icon');
            const messageEl = document.getElementById('notification-message');
            
            // 设置通知类型样式
            notification.className = 'fixed top-20 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center z-50';
            
            switch(type) {
                case 'success':
                    notification.classList.add('bg-success', 'text-white');
                    icon.className = 'fa fa-check-circle mr-2';
                    break;
                case 'error':
                    notification.classList.add('bg-danger', 'text-white');
                    icon.className = 'fa fa-exclamation-circle mr-2';
                    break;
                case 'info':
                default:
                    notification.classList.add('bg-primary', 'text-white');
                    icon.className = 'fa fa-info-circle mr-2';
                    break;
            }
            
            // 设置消息内容
            messageEl.textContent = message;
            
            // 显示通知
            notification.style.transform = 'translateX(0)';
            
            // 3秒后隐藏通知
            setTimeout(() => {
                notification.style.transform = 'translateX(calc(100% + 20px))';
            }, 3000);
        }
        
        // 切换主题
        function toggleTheme() {
            const body = document.body;
            const isDark = body.classList.toggle('dark-mode');
            
            const themeIcon = document.querySelector('#theme-toggle i');
            const mobileThemeIcon = document.querySelector('#mobile-theme-toggle i');
            
            if (isDark) {
                body.classList.add('bg-gray-900', 'text-white');
                body.classList.remove('bg-gray-50', 'text-dark');
                themeIcon.className = 'fa fa-sun-o';
                mobileThemeIcon.className = 'fa fa-sun-o mr-2';
                showNotification('已切换至深色模式', 'info');
            } else {
                body.classList.add('bg-gray-50', 'text-dark');
                body.classList.remove('bg-gray-900', 'text-white');
                themeIcon.className = 'fa fa-moon-o';
                mobileThemeIcon.className = 'fa fa-moon-o mr-2';
                showNotification('已切换至浅色模式', 'info');
            }
        }
        
        // 保存数据到本地存储
        function saveToLocalStorage() {
            localStorage.setItem('vsvTeamMembers', JSON.stringify(members));
        }
        
        // 从本地存储加载数据
        function loadFromLocalStorage() {
            const savedMembers = localStorage.getItem('vsvTeamMembers');
            if (savedMembers) {
                members = JSON.parse(savedMembers);
            }
        }
    </script>
</body>
</html>
